const BUI = {
  white: '#fff',
  black: {
    c1: '#333333',
    c2: '#666666',
    c3: '#999999',
    c4: '#CCCCCC',
    c5: '#E9E9E9',
    c6: '#F5F5F5'
  },
  blue: {
    c1: '#0071E2',
    c2: '#258FF8',
    c3: '#5BADFC',
    c4: '#86C2FC',
    c5: '#D7EBFF',
    c6: '#EBF5FF'
  },
  red: {
    c1: '#ED2827',
    c2: '#FF5453',
    c3: '#FF7373',
    c4: '#FF9898',
    c5: '#FFD9D9',
    c6: '#FFEEEE'
  },
  orange: {
    c1: '#BD4C00',
    c2: '#FF7F29',
    c3: '#FF9B58',
    c4: '#FFB07B',
    c5: '#FFE7D7',
    c6: '#FFF5EE'
  },
  yellow: {
    c1: '#ED9400',
    c2: '#FFBC00',
    c3: '#FFD21E',
    c4: '#FFE167',
    c5: '#FAEFC1',
    c6: '#FFF9E2'
  },
  green: {
    c1: '#00AB56',
    c2: '#0DC66A',
    c3: '#45D38B',
    c4: '#74EBAE',
    c5: '#CFFBE4',
    c6: '#E8FFF3'
  },
  limeade: {
    c1: '#42B500',
    c2: '#60CF20',
    c3: '#86D955',
    c4: '#9FEB72',
    c5: '#DBFBC8',
    c6: '#EDFDE4'
  },
  purple: {
    c1: '#4F45D9',
    c2: '#6E64ED',
    c3: '#938BF6',
    c4: '#AEA8F6',
    c5: '#E7E5FF',
    c6: '#F5F5FF'
  },
  miscellaneous: {
    c1: '#EEEEEE',
    c2: '#DDDDDD'
  },

  // define modal settings
  smallModal: {
    width: '400px',
    borderRadius: '2px'
  },
  middleModal: {
    width: '600px',
    borderRadius: '2px',
    maxHeight: '600px'
  },
  largeModal: {
    width: '800px',
    borderRadius: '2px',
    maxHeight: '600px'
  }
};

module.exports = {
  // ==============================
  // overwrite Ant Design variables
  // ==============================

  // colors
  'blue-6': BUI.blue.c2,

  // Base
  'body-background': '#f2f2f2',
  'border-radius-base': '2px',

  // links
  'link-hover-color': BUI.blue.c1,
  'link-active-color': BUI.blue.c1,

  // buttons
  'padding-md': '17px',
  'padding-xs': '9px',
  'btn-font-size-lg': '16px',
  'btn-font-size-sm': '12px',
  'btn-height-base': '30px',
  'btn-height-lg': '40px',
  'btn-height-sm': '26px',
  'border-radius-base': '2px',

  // ==============================
  // BUI variables
  // ==============================

  // container settings
  'bui-container-max-width': '1200px',

  // color settings
  'bui-blue': BUI.blue.c2,
  'bui-red': BUI.red.c2,
  'bui-orange': BUI.orange.c2,
  'bui-yellow': BUI.yellow.c2,
  'bui-green': BUI.green.c2,
  'bui-limeade': BUI.limeade.c2,
  'bui-purple': BUI.purple.c2,

  //various fonts color
  'bui-title-gradation': BUI.black.c1,

  // button settings
  'bui-btn-pure-font-color': BUI.white,
  'bui-btn-disabled-font-color': BUI.black.c4,

  // specify blue button
  'bui-btn-blue-color': BUI.white,
  'bui-btn-blue-background': BUI.blue.c2,
  'bui-btn-blue-disabled-color': BUI.black.c4,
  'bui-btn-blue-disabled-background-color': BUI.miscellaneous.c1,

  // specify red button
  'bui-btn-red-color': BUI.white,
  'bui-btn-red-background': BUI.red.c2,
  'bui-btn-red-disabled-color': BUI.black.c4,
  'bui-btn-red-disabled-background-color': BUI.miscellaneous.c1,

  // specify orange button
  'bui-btn-orange-color': BUI.white,
  'bui-btn-orange-background': BUI.orange.c2,
  'bui-btn-orange-disabled-color': BUI.black.c4,
  'bui-btn-orange-disabled-background-color': BUI.miscellaneous.c1,

  // specify green button
  'bui-btn-green-color': BUI.white,
  'bui-btn-green-background': BUI.green.c2,
  'bui-btn-green-disabled-color': BUI.black.c4,
  'bui-btn-green-disabled-background-color': BUI.miscellaneous.c1,

  // specify white background button
  'bui-btn-white-background-color': BUI.white,
  'bui-btn-white-color--hover': BUI.blue.c2,
  'bui-btn-white-border-color--hover': BUI.blue.c3,
  'bui-btn-white-color--disabled': BUI.black.c4,
  'bui-btn-white-background-color--disabled': BUI.black.c6,
  'bui-btn-white-border-color--disabled': BUI.black.c5,

  'bui-btn-white-one-color': BUI.black.c2,
  'bui-btn-white-one-border-color': BUI.black.c4,
  'bui-btn-white-one-background--hover': BUI.white,

  'bui-btn-white-two-color': BUI.blue.c2,
  'bui-btn-white-two-border-color': BUI.blue.c3,
  'bui-btn-white-two-background--hover': BUI.blue.c6,

  // specify colorful button
  'bui-btn-colorBlue-color': BUI.blue.c2,
  'bui-btn-colorBlue-background-color': BUI.blue.c6,
  'bui-btn-colorBlue-border-color': BUI.blue.c3,

  'bui-btn-colorRed-color': BUI.red.c2,
  'bui-btn-colorRed-background-color': BUI.red.c6,
  'bui-btn-colorRed-border-color': BUI.red.c3,

  'bui-btn-colorOrange-color': BUI.orange.c2,
  'bui-btn-colorOrange-background-color': BUI.orange.c6,
  'bui-btn-colorOrange-border-color': BUI.orange.c3,

  'bui-btn-colorGreen-color': BUI.green.c2,
  'bui-btn-colorGreen-background-color': BUI.green.c6,
  'bui-btn-colorGreen-border-color': BUI.green.c3,

  // modal settings
  // define small modal
  'bui-small-modal-width': BUI.smallModal.width,
  'bui-small-modal-border-radius': BUI.smallModal.borderRadius,

  // define middle modal
  'bui-middle-modal-width': BUI.middleModal.width,
  'bui-middle-modal-border-radius': BUI.middleModal.borderRadius,
  'bui-middle-modal-max-height': BUI.middleModal.maxHeight,

  // define large modal
  'bui-large-modal-width': BUI.largeModal.width,
  'bui-large-modal-border-radius': BUI.largeModal.borderRadius,
  'bui-large-modal-max-height': BUI.largeModal.maxHeight,

  // define switch color
  'bui-switch-background-color': BUI.limeade.c2,

  // input settings
  // define basic input
  'bui-input-basic-color': BUI.black.c4,
  'bui-input-basic-background-color': BUI.white,
  'bui-input-basic-border-color': BUI.miscellaneous.c2,

  // define search input
  'bui-input-search-color': BUI.black.c4,
  'bui-input-search-background-color': BUI.white,
  'bui-input-search-border-color': BUI.miscellaneous.c2,
  'bui-input-search-icon-color': BUI.black.c4,
  'bui-input-search-color--focus': BUI.black.c1,

  // define submit input
  'bui-input-submit-color': BUI.black.c1,
  'bui-input-submit-background-color': BUI.white,
  'bui-input-submit-border-color': BUI.miscellaneous.c2,
  'bui-input-submit-icon-color': BUI.black.c2,

  // define basic textArea
  'bui-textarea-height': '100px',
  'bui-textarea-basic-color': BUI.black.c4,
  'bui-textarea-basic-background-color': BUI.white,
  'bui-textarea-basic-border-color': BUI.miscellaneous.c2,
  'bui-textarea-basic-color--focus': BUI.black.c1,

  // define constrained textarea
  'bui-textarea-constrained-color': BUI.black.c4,
  'bui-textarea-constrained-background-color': BUI.white,
  'bui-textarea-constrained-border-color': BUI.miscellaneous.c2,
  'bui-textarea-constrained-color--focus': BUI.black.c1,

  // alert settings
  'bui-alert-info-color': BUI.blue.c2,
  'bui-alert-info-background': BUI.blue.c6,
  'bui-alert-info-border': BUI.blue.c5,

  'bui-alert-error-color': BUI.red.c2,
  'bui-alert-error-background': BUI.red.c6,
  'bui-alert-error-border': BUI.red.c5,

  'bui-alert-warning-color': BUI.orange.c2,
  'bui-alert-warning-background': BUI.orange.c6,
  'bui-alert-warning-border': BUI.orange.c5,

  'bui-alert-success-color': BUI.green.c2,
  'bui-alert-success-background': BUI.green.c6,
  'bui-alert-success-border': BUI.green.c5,

  'bui-alert-description-color': BUI.black.c2,
  'bui-alert-description-background': BUI.black.c6,
  'bui-alert-description-border': BUI.black.c5
};
